<template>
  <div>
    <div class="search" :class="{ inps: hang }">
      <div class="inp">
        <van-icon name="search" size="20" color="#fff" />
      </div>
    </div>
    <header>
      <div class="show"><img src="../../../img/home/home.png" alt="" /></div>
    </header>
    <div class="txt">
      <h3>热门功能</h3>
      <p>Hot features</p>
    </div>
    <section class="function">
      <ul>
        <li>
          <img src="../../../img/home/hot.png" alt="" />
          <p>每日领卷</p>
        </li>
        <li>
          <img src="../../../img/home/hot.png" alt="" />
          <p>每日领卷</p>
        </li>
        <li>
          <img src="../../../img/home/hot.png" alt="" />
          <p>每日领卷</p>
        </li>
        <li>
          <img src="../../../img/home/hot.png" alt="" />
          <p>每日领卷</p>
        </li>
      </ul>
    </section>
    <div class="txt">
      <h3>本周推荐</h3>
      <p>Weekly recommendation</p>
    </div>
    <div>
      <shop :list="list"></shop>
    </div>
    <div class="txt">
      <h3>新品专区</h3>
      <p>New arrival</p>
    </div>
    <section class="new">
      <shop :list="lists"></shop>
    </section>
    <div style="height: 40px"></div>
  </div>
</template>

<script>
import img from "../../../img/home/tw.png";
import imgs from "../../../img/home/new.png";

import shop from "../../../components/shop.vue";
export default {
  data() {
    return {
      list: [
        {
          id: 1,
          img: img,
          name: "BOB海岛系列",
          pice: 158,
        },
        {
          id: 2,
          img: imgs,
          name: "BOB海岛系列",
          pice: 159,
        },
        {
          id: 3,
          img: img,
          name: "BOB海岛系列",
          pice: 160,
        },
      ],
      lists: [
        {
          id: 1,
          img: img,
          name: "BOB",
          pice: 158,
        },
        {
          id: 2,
          img: imgs,
          name: "BO",
          pice: 159,
        },
        {
          id: 3,
          img: img,
          name: "BOB",
          pice: 160,
        },
      ],
      hang: false,
    };
  },
  components: {
    shop,
  },
  // 滚动监听
  mounted() {
    window.addEventListener("scroll", this.handleScroll); // 监听页面滚动
  },
  methods: {
    // 获取页面滚动距离
    handleScroll() {
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      // console.log(scrollTop, "滚动距离");
      if (scrollTop === 0) {
        this.hang = false;
      } else {
        this.hang = true;
      }
    },
  },
  // 滚动重置
  beforeDestroy() {
    window.removeEventListener("scroll", this.handleScroll);
  },
};
</script>

<style lang="scss">
* {
  padding: 0;
  margin: 0;
  list-style: none;
}
header {
  width: 750px;
  height: 432px;
  background: linear-gradient(180deg, #80b7f1 19%, #ffffff 67%, #f2f2f2 100%);
}
.search {
  width: 750px;
  height: 100px;
  // overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  // background: linear-gradient(180deg, #80b7f1 19%, #ffffff 67%, #f2f2f2 100%);
}
.inp {
  box-sizing: border-box;
  width: 712px;
  height: 58px;
  display: flex;
  align-items: center;
  padding-left:21px ;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 29px;
  margin-top: 25px;
  margin-left: 21px;
}
.inps {
  background-color: #fff;
  z-index: 10;
  .inp {
    background-color: rgba(194, 187, 187, 0.493);
    margin-top: 25px;
    z-index: 10;
  }
}
.show {
  width: 710px;
  height: 288px;
  position: absolute;
  top: 107px;
  left: 20px;
  img {
    width: 100%;
    height: 100%;
  }
}
.txt {
  margin: 30px 0px 24px 30px;
}
.function {
  width: 696px;
  height: 190px;
  margin-left: 28px;
  ul {
    display: flex;
    justify-content: space-between;
    li {
      width: 160px;
      height: 190px;
      text-align: center;
      img {
        width: 160px;
        height: 160px;
      }
      p {
        width: 160px;
        height: 30px;
        line-height: 30px;
      }
    }
  }
}
</style>
